'use strict'

import React, { Component } from 'react'
import Icon from '../../icon/Icon'
import * as color from '../../../configs/color'
import Mask from '../Mask'
import './style.scss'

const wrapperStyle = {
    position: 'relative'
}

const loadingStyle = {
    color: color.SHALLOW
}

export default class Loading extends Component {
    constructor(props) {
        super(props)
        this.state = {
            on: this.props.on
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            on: nextProps.on
        })
    }

    render() {
        const renderStyle = Object.assign({}, loadingStyle, {
            display: this.state.on ? 'block' : 'none'
        })

        return (
            <div style={renderStyle}>
                {this.props.mask ? <Mask bg={color.TRANSPARENT}/> : null}
                <div className="ddui-loading" style={loadingStyle}>
                    <Icon iconName="spinner"/>
                </div>
            </div>
        )
    }

}

Loading.defaultProps = {
    on: false,
    mask: false
}
